<!--
 * @Author: boyyang
 * @Date: 2022-01-16 13:51:20
 * @LastEditTime: 2022-01-22 23:58:58
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\imagesExhibtion\imagesItem.vue
-->

<template>
    <div class="images-item-wrapper">
        <div class="box">
            <div class="box-content">
                <div
                    :class="['images-item', { 'images-item-pc': !props.isMobile }]"
                    v-for="(item, i) in props.imgs"
                    :key="i"
                    :style="{ '--i': i } as any"
                >
                    <img :src="item.tempFileURL" alt="item.name" @click="downImg(item.tempFileURL)" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
interface IImagesItemProps {
    imgs?: any[];
    isMobile?: boolean;
}

let props = withDefaults(defineProps<IImagesItemProps>(), {
    isMobile: true
})

const downImg = (d_url: string) => {
    window.open(d_url, '_black')
}

</script>

<style scoped lang="scss">
.images-item-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #353540;

    display: flex;
    justify-content: center;
    align-items: center;

    .box {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        position: relative;

        display: flex;
        justify-content: center;
        align-items: center;

        transform-style: preserve-3d;
        // perspective: 5500px;

        transform: rotateX(13deg);
    }

    .box-content {
        display: flex;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;

        animation: trans 30s linear infinite;
        transform: rotateX(-20deg);

        @keyframes trans {
            0% {
                transform: rotateX(-20deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(-20deg) rotateY(360deg);
            }
        }
    }

    .images-item {
        box-sizing: border-box;
        width: 350px;
        height: 500px;

        position: absolute;

        display: flex;
        justify-content: center;
        align-items: center;

        transform: rotateY(calc(var(--i) * 60deg)) translateX(460px)
            rotateY(90deg);

        border-radius: 10px;
        overflow: hidden;

        -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left
                    bottom, from(transparent), to(rgba(250, 250, 250, 0.4)));

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-box-reflect: below 10px;
        }
    }

    .images-item-pc {
        box-sizing: border-box;
        width: 450px;
        height: 280px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-box-reflect: below 10px;
        }
    }
}
</style>
